// KB2Selection.less
// 颜色变量
@primary: #1EB7D8;
@secondary1: #D4E9FC;
@secondary2: #ECFFF9;
@darkText: #0A6E8A;
@light: #FAFCFF;
@kb1: #FF9E7D;
@kb2: #8CD790;
@kb3: #FFD966;
@kb4: #A7ACEF;
@lastStudyBg: #FF5252;
@lastStudyText: #FFFFFF;
@game: #FF6B8B;

// 动画定义
@keyframes floating {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

// 全局样式
.kb2-selection-container {
  min-height: 100vh;
  background-color: @light;
  font-family: 'Comic Sans MS', 'Marker Felt', 'Arial Rounded MT Bold', sans-serif;
  
  // 主要内容区样式
  .main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px 64px;
    margin-top: -4px;
    
    .cards-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      margin-top: 56px;
      
      // 卡片通用样式
      .study-card, .game-card {
        background: white;
        border-radius: 16px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        position: relative;
        border: 2px solid;
        padding: 16px;
        cursor: pointer;
        
        &.card-bounce {
          transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          
          &:hover {
            transform: translateY(-8px) scale(1.02);
          }
          
          &.scale-95 {
            transform: scale(0.95);
          }
        }
        
        .card-decoration {
          position: absolute;
          opacity: 0.7;
          
          &.decoration-1 {
            top: 16px;
            left: 16px;
            width: 32px;
            height: 32px;
            background: fade(@primary, 10%);
            border-radius: 50%;
          }
          
          &.decoration-2 {
            bottom: 32px;
            right: 40px;
            width: 20px;
            height: 20px;
            background: fade(@primary, 20%);
            border-radius: 50%;
          }
          
          &.game-star {
            transform-origin: center;
            font-size: 18px;
            
            &.star-1 {
              top: 24px;
              left: 24px;
              color: fade(@game, 70%);
            }
            
            &.star-2 {
              bottom: 40px;
              right: 32px;
              color: fade(@game, 50%);
              font-size: 16px;
            }
            
            &.star-3 {
              top: 64px;
              right: 20px;
              color: fade(@game, 60%);
              font-size: 12px;
            }
          }
          
          &.floating {
            animation: floating 3s ease-in-out infinite;
          }
          
          &.floating-delay-1 {
            animation: floating 3.2s ease-in-out infinite;
            animation-delay: 0.3s;
          }
          
          &.floating-delay-2 {
            animation: floating 3.5s ease-in-out infinite;
            animation-delay: 0.6s;
          }
        }
        
        .card-content {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          position: relative;
          z-index: 10;
          
          .icon-wrapper {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 16px;
            
            &.study-icon {
              background: fade(@primary, 10%);
            }
            
            &.game-icon {
              background: fade(@game, 10%);
            }
            
            .card-icon {
              font-size: 20px;
              
              .study-card & {
                color: @primary;
              }
              
              .game-card & {
                color: @game;
              }
            }
          }
          
          .card-title {
            font-size: 20px;
            font-weight: bold;
            color: #374151;
            margin-bottom: 4px;
          }
          
          .card-description {
            color: #6B7280;
            font-size: 14px;
            margin-bottom: 16px;
            max-width: 240px;
          }
          
          .progress-dots {
            display: flex;
            gap: 4px;
            margin-bottom: 16px;
            
            .dot {
              width: 8px;
              height: 8px;
              border-radius: 50%;
              
              .study-card & {
                background: fade(@primary, 30%);
                
                &.active {
                  background: @primary;
                }
              }
              
              .game-card & {
                background: fade(@game, 30%);
                
                &.active {
                  background: @game;
                }
              }
            }
            
            &.game-dots {
              .dot {
                width: 10px;
                height: 10px;
              }
            }
          }
          
          .action-button {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            
            &.study-action {
              background: fade(@primary, 10%);
            }
            
            &.game-action {
              background: fade(@game, 10%);
            }
            
            .action-icon {
              font-size: 16px;
              
              .study-card & {
                color: @primary;
              }
              
              .game-card & {
                color: @game;
              }
            }
          }
        }
      }
      
      // 特定卡片样式
      .study-card {
        border-color: fade(@primary, 30%);
      }
      
      .game-card {
        border-color: fade(@game, 30%);
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .kb2-selection-container {
    .main-content {
      .cards-grid {
        margin-top: 40px;
      }
    }
  }
}